<!-- 登录页 -->
<template>
  <div class="login">
    <div class="loginbox">
      <h3>密码登录</h3>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-space>
          <el-form-item label="验证码" prop="capthcha">
            <el-input v-model="ruleForm.captcha" />
          </el-form-item>
          <!-- 图形验证码 -->
          <div @click="changecaptchaFn">
            <img :src="imgurl" alt="">
          </div>
        </el-space>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
//导入请求接口
import { loginApi, capthchaApi } from '@/utils/login.js'
import { useRouter } from 'vue-router'
const router = useRouter()

const ruleForm = ref({
  username: '',
  password: '',
  captcha: '',
  key: ''
})
const imgurl = ref('')
const ruleFormRef = ref()

const rules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

//图形验证码请求

capthchaApi().then(res => {

  imgurl.value = res.data.img
  ruleForm.value.key = res.data.key
})
const changecaptchaFn = () => {
  capthchaApi().then(res => {

    imgurl.value = res.data.img
    ruleForm.value.key = res.data.key
  })
}

//发送登录请求
const submitForm = () => {

  loginApi(ruleForm.value).then(res => {
    console.log(res);
    ElMessage({
      message: res.data.message,
      type: res.data.errNo == 0 ? 'success' : 'error',
      duration: 1000
    })

    if (res.data.errNo == 0) {

      //存储
      localStorage.setItem('token', res.data.context.jwt)
      localStorage.setItem('acl', JSON.stringify(res.data.context.acl))
      localStorage.setItem('username', ruleForm.value.username)
      //跳转首页
      router.push('/dashboard/welcome')
    }
  })

}

</script>

<style lang='scss' scoped >
.el-button {
  margin: 0 auto;
}

.login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/bg.jpeg');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .loginbox {
    width: 400px;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
    background: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .el-form {
      width: 80%;
      margin: 0 auto;
    }

    /* 
       样式穿透,用来修改某一些ui 组件默认自带的样式,提高权重
     */
    ::v-deep .el-form-item__content {
      margin: 0 !important;
    }
  }
}
</style>